import React from 'react';
import styles from '@/assets/css/login.module.css';

interface FormValues{
    mobile:string;
    password:string;
}

export default function Login()
{
    // 创建一个表单实例
    const [ form ] = React.UI.Form.useForm();

    const OnSubmit = async (values:FormValues) =>
    {
        const result = await React.http.post('/business/login',values);

        if(result.code === 1)
            {
                React.success(result.msg,() =>
                {
                    React.Cookies.save('business',result.data,{path:'/'});
    
                    React.business = result.data;
    
                    // 获取redirect值
                    const redirect = React.Cookies.load('redirect') ?? '';
    
                    if(redirect)
                    {
                        React.navigate(-1);
    
                        React.Cookies.remove('redirect',{path:'/'});
                    }else{
    
                        React.navigate(result.url,{replace:true});
                    }
                });
            }else{
                React.fail(result.msg);
            }
    }

    return (
        <>
            <div className={styles.headers}>
                <div className={styles.userinfo}>
                    <div className={styles.avatar}></div>
                </div>
                <div className={styles.corrugated}>
                    <div className={`${styles.wave_top} ${styles.wave_item}`}></div>
                    <div className={`${styles.wave_middle} ${styles.wave_item}`}></div>
                </div>
            </div>

            <div className={styles.login}>
                <React.UI.Form
                    layout='horizontal'
                    mode='card'
                    form={form}
                    onFinish={OnSubmit}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <React.UI.Button shape='rounded' type='submit' color='warning' block>
                                注册登录
                            </React.UI.Button>
                        </div>
                    }
                >
                    <React.UI.Form.Item
                        name='mobile'
                        label="手机号码"
                        initialValue="13700000000"
                        rules={[
                            {required: true, message: '请填写手机号码'},
                            {pattern: /^1[356789]\d{9}$/, message: '请输入正确格式的手机号码'}
                        ]}
                    >
                        <React.UI.Input placeholder="请输入手机号码" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item
                        initialValue="123123"
                        rules={[{required: true, message: '请输入密码'}]}
                        name="password"
                        label="密码"
                    >
                        <React.UI.Input placeholder="请输入密码" type="password" />
                    </React.UI.Form.Item>
                </React.UI.Form>
            </div>
        </>
    )
}